<template>
  <div
    :id="id"
    class="dip-angle-gauge"
  >
    <dip-angle-svg></dip-angle-svg>
  </div>
</template>

<script>
import DipAngleSvg from '@/components/svg/DipAngle.vue'
export default {
  name: "Dip-Angle-Gauge",
  computed: {
    id: function() {
      return "dip-angle-gauge-" + Math.random() * new Date().getTime();
    }
  },
  props: {
    data: {
      type: String,
      default: "6"
    }
  },
  methods: {
    initData() {
      let option = {
        series: [
          {
            name: "倾角",
            type: "gauge",
            min: -15,
            max: 15,
            radius: "100%",
            startAngle: 105,
            endAngle: 75,
            splitNumber: 6,
            detail: { formatter: "{value}°" },
            data: [{ value: this.data, name: "倾角" }],
            axisTick: {
              show: true,
              splitNumber: 2,
              lineStyle: {
                color: "#3581fb"
              },
              length: 10
            },
            splitLine: {
              show: true,
              splitNumber: 1,
              lineStyle: {
                color: "#3581fb"
              },
              length: 12
            },
            axisLine: {
              show: false,
              lineStyle: {
                height: 5,
                width: 5,
                color:[[1, '#fff']]
              }
            },
            pointer: {
              show: false
            }
          }
        ]
      };

      // let el = echarts.init(document.getElementById(this.id));
      // el.clear();
      // el.setOption(option);
    }
  },
  mounted() {
    this.initData();
  },
  components: {
    DipAngleSvg
  }
};
</script>

<style>
.dip-angle-gauge {
  width: 109px;
  height: 100px;
}
</style>
